<template>
  <view class="container">
    <view class="menu">
      <view class="menu-item"  v-for="item in menuList" :key="item.id">
          <image class="menu-icon" :src="item.src"></image>
          <view class="menu-text">{{item.text}}</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "my-menu",
    data() {
      return {
        menuList: [{
            id: 1,
            src: '/static/menu/B-哲学宗教.png',
            text: '哲学宗教'
          },
          {
            id: 2,
            src: '/static/menu/C-社会.png',
            text: '社会'
          },{
            id: 3,
            src: '/static/menu/D-政治法律.png',
            text: '政治法律'
          },{
            id: 4,
            src: '/static/menu/E-军事.png',
            text: '军事'
          },{
            id: 5,
            src: '/static/menu/F-经济.png',
            text: '经济'
          },{
            id: 6,
            src: '/static/menu/G-文化.png',
            text: '文化'
          },{
            id: 7,
            src: '/static/menu/H-语言.png',
            text: '语言'
          },{
            id: 8,
            src: '/static/menu/I-文学.png',
            text: '文学'
          },{
            id: 9,
            src: '/static/menu/J-艺术.png',
            text: '艺术'
          },{
            id: 10,
            src: '/static/menu/K-地理.png',
            text: '地理'
          },{
            id: 11,
            src: '/static/menu/N-自然.png',
            text: '自然'
          },{
            id: 12,
            src: '/static/menu/O-数学.png',
            text: '数学'
          },{
            id: 13,
            src: '/static/menu/P-天文学.png',
            text: '天文学'
          },{
            id: 14,
            src: '/static/menu/Q-生物.png',
            text: '生物'
          },{
            id: 15,
            src: '/static/menu/R-医学.png',
            text: '医学'
          },{
            id: 16,
            src: '/static/menu/S-农业.png',
            text: '农业'
          }
        ]
      };
    }
  }
</script>

<style lang="scss">
  .menu {
    height: 300px;
    display: flex;
    background-color: #FFFFFF;
    flex-wrap: wrap;
    margin: 10px;
    border-radius: 18px;
    .menu-item {
      margin-top: 5px;
      width: 25%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      .menu-icon {
        width: 60rpx;
        height: 60rpx;
      }

      .menu-text {
        font-size: 14px;
        color: #2e2e2e;
      }
    }
  }
</style>
